<!DOCTYPE HTML >
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <title>模板修改</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/vivo/layui/css/layui.css">
    <link rel="stylesheet" href="/css/bootstrap.css">
    <link rel="stylesheet" href="/css/vivo.css">
    <link rel="stylesheet" href="/css/style.css">
    <script type="text/javascript" src="/js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="/js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/js/sharefunction.js"></script>
    <script type="text/javascript" src="/js/form.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script src="/vivo/layui/layui.js"></script>


    <style type="text/css">
		button.btn {
			min-width:80px;
		}
		select[multiple] {
			height:360px;
		}

		 #selectedList,#selectedList1,#optinalList,#optinalLists,#optinalListss {
			border: 1px solid #eee;
			min-height: 50px;
			list-style-type: none;
			padding: 5px;
			margin: 5px;
		}

		#selectedList,#selectedList1{
		white-space: nowrap;
		}
		 #selectedList li,#selectedList1 li{
			 margin: 2px 2px 2px 2px;
			padding: 2px 6px 2px 6px;
			font-size: 12px;
			height: 30px;
			line-height: 30px;
			overflow:hidden;
			float:left;
			white-space:nowrap;
			*white-space:nowrap;
			text-overflow:ellipsis;cursor:hand;
		 }
		#optinalList li,#optinalLists li,#optinalListss li {
			margin: 2px 2px 2px 2px;
			padding: 2px 6px 2px 6px;
			font-size: 12px;
			height: 30px;
			line-height: 30px;
			float:left;
			background-color:#8189DA;
			color:#ffffff;
			overflow:hidden;
			white-space:nowrap;
			white-space:nowrap;
			text-overflow:ellipsis;
			cursor:hand;

		}
		.clearfix:after{
		    display:block;
		    content:'';
		    clear:both;
		    height:0;
		}
        .clearfix{
            *zoom:1
        }
		.ui-state-highlight{
		width:70px;
		}
		.bg-optinal,.bg-selected {
			background-color: rgb(223,240,216);
			color: rgb(60,118,61);
			font-family: 'Microsoft YaHei', '黑体', Arial, sans-serif;
			overflow:hidden;
			white-space:nowrap;
			*white-space:nowrap;
			text-overflow:ellipsis;
		}

		.bg-optinal {
			background-color:rgb(252,248,227);
			color:rgb(138,109,59);
			width: 107px;
		}

		.ui-resizable-handle.ui-resizable-se.ui-icon.ui-icon-gripsmall-diagonal-se{
		background: none;
		}
		#sele{

		}

		//列表选择字段样式
		#selectField ul{
		list-style:none;
		}
		#selectField ul li{
		display:block;
		width:120px;
		float:left;
		margin-left:5px;
		margin-top:5px;
		text-align:center;
		white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
		}
		.detail{
			border: none;
		}
	</style>

</head>
<body class="layui-layout-admin">
<div id="content" style="padding-top:10px">

    <!--查询框-->
    <div class="detail">
        <div>
            <ul id="breadcrumb">
                <li><a href="javascript:history.back(-1)" ><span class="icon icon-home"><img src="/images/icons/64/home.png" width="28"/>  </span>返回</a>
                </li>
                <li></li>

            </ul>
        </div>
        <div style="padding-bottom:15px">


            <div style="padding:10px 0px 0px 0px">

                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">数据报表信息</h3>
                    </div>
                    <div class="panel-body">

                        <form class="form-horizontal">
                            <input type="text" id="id" th:value="${template.id}" hidden="hidden"/>
                            <table cellpadding="10" cellspacing="5" class="mytable">
                                <tr>
                                    <td width="130">数据模板名称</td>
                                    <td><input type="text" id="tempelateName" name="tempelateName" th:value="${template.templateName}" style="width:300px"/> <font color="red">*</font> </td>
                                </tr>
                                <tr>
                                    <td width="130">数据模版描述</td>
                                    <td><input type="text" id="tempelateRemark" name="tempelateRemark"  th:value="${template.templateRemark}" style="width:500px"/>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <h3 class="panel-title">设置数据报表内容</h3>
                    </div>
                    <div class="panel-body">
                        <table  class="table table-bordered">
                            <tr>
                                <td>可选列</td>
                                <td>
                                    <div id="selectField">
                                        <div>列名称 <input type="checkbox"  onClick="getCheckListAll(this,'zc')" />全选</div>
                                        <ul >
                                            <th:block th:each="node:${dtlist}" varStatus="status">
                                                <li th:attr="field-name=${node.id}" style="text-align: left; width: 160px">
                                                    <input type="checkbox" name="zc" th:id="${node.id}+'C'"
                                                           th:value="${node.id}"  th:onclick="'javascript:getCheckList(\''+${node.id}+'C\')'"/>
                                                    <span th:id="${node.id}" th:text="${node.fieldNameCn}" th:title="${node.fieldNameCn}"></span>
                                                </li>
                                            </th:block>
                                        </ul>
                                        <div style="clear:both" ></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>已选列</td>
                                <td>
                                    <div>列名称</div>
                                    <ul id="optinalList" class="connectedSortable clearfix" style="min-width: 100%;">

                                        <th:block th:each="node:${fieldList}" varStatus="status">
                                            <li th:id="${node.id}+'_li'" class="bg-selected" th:attr="field-name=${node.id}" >
                                                <input type="checkbox" name="seled" th:value="${node.id}" > <span th:text="${node.fieldNameCn}"></span> </li>
                                        </th:block>
                                    </ul>
                                </td>
                            </tr>

                            <tr>
                                <td width="130">说明</td>
                                <td>
                                    <div style="color:#808080">
                                        左右拖动可排列位置顺序。
                                    </div>
                                </td>
                            </tr>

                        </table>

                    </div>
                </div>



                <div class="form-group">
                    <div style="text-align:center;width:100%">
                        <a class='btn btn-primary' href='javascript:savePrice()' > 保 存 </a>  &nbsp;
                        <a class='btn btn-default' href='javascript:window.close()' > 取 消 </a>
                    </div>
                </div>

                <div style="clear:both"></div>
            </div>
        </div>
    </div>

        </div>
        <script type="text/javascript">
	  $(document).ready(function() {
		  var selList=document.getElementsByName('seled');
		  var checkList=document.getElementsByName('zc');
		  getSingleFromSel(selList,checkList);
		});
		//列表所含字段展示为选中状态
		function getSingleFromSel(selList,checkList){
		console.log(selList,checkList)
			for(var i=0;i<selList.length;i++){
				for(var j=0;j<checkList.length;j++){
					if(selList[i].value==checkList[j].value){
						checkList[j].checked=true;
					}
				}
			}
		}

		//自定义模块布局
		function Bili(li){
			//alert(li);
			var arr = new Array();
			arr = li.split(":");
			//alert(arr.length);
			if(arr.length==2){
				var totalWidth1= 1080/(parseInt(arr[0])+parseInt(arr[1]))*arr[0];
				var totalWidth2= 1080/(parseInt(arr[0])+parseInt(arr[1]))*arr[1];

				document.getElementById("option1").style.width=totalWidth1+"px";
				document.getElementById("option2").style.width=totalWidth2+"px";
				$('#option3').hide();

				$("#selectedList").append($("#optinalListss>li").clone());

				$("#optinalListss").html("");

			}else if(arr.length==3){
				var totalWidth1= 1080/(parseInt(arr[0])+parseInt(arr[1])+parseInt(arr[2]))*arr[0];
				var totalWidth2= 1080/(parseInt(arr[0])+parseInt(arr[1])+parseInt(arr[2]))*arr[1];
				var totalWidth3= 1080/(parseInt(arr[0])+parseInt(arr[1])+parseInt(arr[2]))*arr[2];

				document.getElementById("option1").style.width=totalWidth1+"px";
				document.getElementById("option2").style.width=totalWidth2+"px";
				document.getElementById("option3").style.width=totalWidth3+"px";
				$('#option3').show();
			}
		}

		jQuery(function($) {
			$( "#selectedList" ).sortable({
				connectWith: ".connectedSortable",
				 placeholder: "ui-state-highlight",
				 receive:function(){
					 $('#selectedList .bg-optinal').removeAttr('style');
				 }
			}).disableSelection();

			$( "#optinalList" ).sortable({
				connectWith: ".connectedSortable",
				 placeholder: "ui-state-highlight",
				 receive:function(){
					 $('#optinalList .bg-selected').removeAttr('style');
				 }
			}).disableSelection();

			$( "#optinalLists" ).sortable({
				connectWith: ".connectedSortable",
				 placeholder: "ui-state-highlight",
				 receive:function(){
					 $('#optinalLists .bg-selected').removeAttr('style');
				 }
			}).disableSelection();

			$( "#optinalListss" ).sortable({
				connectWith: ".connectedSortable",
				 placeholder: "ui-state-highlight",
				 receive:function(){
					 $('#optinalListss .bg-selected').removeAttr('style');
				 }
			}).disableSelection();

			$( ".bg-selected,.bg-optinal" ).resizable({
				 maxHeight:30,
				 handles: "e"
			 });
			 var storage = storage || $.localStorage;
			$("#exchangeBtn").click(function() {
				$.layer({
					shade: [0],
					shadeClose: true,
					title: false,
					time: 10,
					dialog: {
						type: 9,
						msg: "按下鼠标选择字段后，保持左键不放，可在左右列表中自由拖放。"
					}
				});
			});
			$("#updownBtn").click(function() {
				$.layer({
					shade: [0],
					shadeClose: true,
					title: false,
					time: 10,
					dialog: {
						type: 9,
						msg: "按下鼠标选择字段后，保持左键不放，可在列表中上下拖放以改变顺序。"
					}
				});
			});
		});

		$(document).ready(function() {
			$("input[name='isDefault']").each(function(idx) {
				$(this).click(function(){
					if ($(this).attr("id") === "isDefaultFalse") {
						$("input[name='applyToAll']").get(1).checked = true;
						$("input[name='applyToAll']").each(function(idx) {
							$(this).attr("disabled", true);
						});
					} else {
						$("input[name='applyToAll']").each(function(idx) {
							$(this).removeAttr("disabled");
						});
					}
				});
			});

			if ($("#isDefaultFalse").attr("checked")) {
				$("input[name='applyToAll']").get(1).checked = true;
				$("input[name='applyToAll']").each(function(idx) {
					$(this).attr("disabled", true);
				});
			}

			$('#closeModal').click(function() {
				if (!!window.parent && !!window.parent.gridViewDlg) {
					window.parent.gridViewDlg.modal('hide');
				}
			});

			$('#saveGridView').click(function() {
			   var serializedFields='1:';
			  $.each($("#optinalList>li"),function(){
				  var param='showFields=<'+$(this).attr('field-name')+">";

				  serializedFields+=param;
			  });
				  serializedFields+="2:";
			  $.each($("#optinalLists>li"),function(){
				  var param='showFields=<'+$(this).attr('field-name')+">";

				  serializedFields+=param;
			  });
			  serializedFields+="3:";
			  $.each($("#optinalListss>li"),function(){
				  var param='showFields=<'+$(this).attr('field-name')+">";

				  serializedFields+=param;
			  });


			   alert(serializedFields);
			   return true;
		   });

		});

		function yanzheng(){

			var name = $("#tempelateName").val();
			//alert(!$("#optinalList").find("li").size()>0);
			if(name==""||name==null){
				alert("请填写模板名称！");
				return false;
			}else if(!$("#optinalList").find("li").size()>0){
				alert("请选择字段！");
				return false;
			}
			return true;

		}

		function savePrice(){
			if(yanzheng()){
				var actionURL = "/uc_report/addReportTemplate";
				var name = $("#tempelateName").val();
				var remark=$("#tempelateRemark").val();
				var id=$("#id").val();
				var field="";
				$("#optinalList").find("input").each(function(){
					if(field==""){
						field=$(this).val()
					}else{
						field+=","+$(this).val()
					}
				});

				var deptData = {id:id,templateName:name,templateRemark:remark,templateFields:field};
				$.post(actionURL,deptData,function(data){
					alert(data.msg);
					history.back(-1);
		      	});
			}
		}
	</script>
</body>
</html>